<template>
  <a-layout class="h-full">
    <a-layout-sider breakpoint="lg" @collapse="onCollapse" @breakpoint="onBreakpoint" collapsed-width="0" theme="dark">
      <div class="home-logo" v-if="applicationData.length > 0">
        <router-link :to="`${applicationData[0].url}`">
          <!-- <img src="../assets/logo.svg" class="align-middle" /> -->
          <span class="align-middle">
            {{ t(`home.${applicationData[0].name}`) }}
          </span>
        </router-link>
      </div>
      <div class="home-menu h-full overflow-auto">
        <a-menu
          mode="inline"
          theme="dark"
          v-model:selectedKeys="menuSelKeys"
          v-model:openKeys="subMenuSelKeys"
          @openChange="onSubMenuOpenChange"
        >
          <component v-for="el in menuData" :key="el.action || el.key" :is="el.children ? 'a-sub-menu' : 'a-menu-item'">
            <template #title v-if="el.children">
              <span>{{ el.name }}</span>
            </template>
            <router-link :to="el.action" v-if="!el.children"> {{ el.name }} </router-link>
            <template #icon v-if="el.icon">
              <component :is="el.icon" />
            </template>
            <template v-if="el.children">
              <a-menu-item v-for="subEl in el.children" :key="subEl.action">
                <router-link :to="subEl.action">
                  {{ subEl.name }}
                </router-link>
                <template #icon v-if="subEl.icon">
                  <component :is="subEl.icon" />
                </template>
              </a-menu-item>
            </template>
          </component>
        </a-menu>
      </div>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="home-header">
        <div class="flex items-center h-full">
          <div class="flex-1"> </div>
          <div class="home-header-info">
            <a-dropdown>
              <span class="inline-block">
                <span class="home-name mr-2">{{ t("home.welcome", { name: username }) }}</span>
                <DownOutlined />
              </span>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1">
                    {{ t("home.changePwd") }}
                  </a-menu-item>
                  <a-menu-divider />
                  <a-menu-item key="2">
                    <router-link to="/login">{{ t("home.logout") }}</router-link>
                  </a-menu-item>
                </a-menu>
              </template>
            </a-dropdown>
          </div>
        </div>
      </a-layout-header>
      <a-layout-content class="overflow-auto">
        <div v-show="pageLoading" class="text-center pt-5">
          <a-spin :spinning="true" size="large"></a-spin>
        </div>
        <router-view v-show="!pageLoading" />
      </a-layout-content>
    </a-layout>
    <div class="absolute inset-0 flex justify-center items-center bg-white bg-opacity-30 z-1050" v-show="globalLoading">
      <a-spin :tip="globalLoadingText" :spinning="globalLoading"></a-spin>
    </div>
  </a-layout>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, computed } from "vue";
import { Menu } from "ant-design-vue";
import { onBeforeRouteUpdate, useRoute } from "vue-router";
// import RouteTabs from "../components/RouteTabs.vue";
import { DownOutlined } from "@ant-design/icons-vue";
import { useI18n } from "vue-i18n";
import { useStore } from "/@/store";
import authCache from "/@/utils/cache/authCache";
import { DEFAULT_IMG_BASE64_STR } from "/@/utils/img";
export default defineComponent({
  name: "Home",
  components: {
    "a-sub-menu": Menu.SubMenu,
    "a-menu-item": Menu.Item,
    DownOutlined,
  },
  setup() {
    const store = useStore();
    const { t } = useI18n();
    // const routeTabs = ref();
    const menuData = computed(() => {
      return store.state.menu.routeMenuData;
    });
    const restrictPath = computed(() => store.state.menu.restrictPath);
    const applicationData = computed(() => {
      const data = store.state.menu.applicationData;
      data.forEach((item) => {
        if (item.url && route.path.indexOf(item.url) === 0) {
          topMenuKeys.value = [item.url];
        }
      });
      return data;
    });
    const menuSelKeys = ref<string[]>([]);
    //
    const onCollapse = (collapsed: boolean, type: string) => {
      // console.log(collapsed, type);
    };
    const onBreakpoint = (broken: boolean) => {
      console.log("onBreakpoint", broken);
    };
    const route = useRoute();
    //找到菜单的上级菜单 然后展开 找不到就不处理
    function expandRootMenu(path) {
      const data = store.state.menu.routeMenuData;
      for (let i = 0; i < data.length; i++) {
        const ii = data[i];
        if (ii.action === path) {
          return;
        }
        if (ii.children && ii.children.length > 0) {
          for (let j = 0; j < ii.children.length; j++) {
            const jj = ii.children[j];
            if (jj.action === path) {
              subMenuSelKeys.value = [ii.key as string];
              return;
            }
          }
        }
      }
    }
    // let firstRouteUpdate = true;
    onBeforeRouteUpdate((to) => {
      // routeTabs.value.add(to);
      // if (firstRouteUpdate) {
      //   firstRouteUpdate = false;
      //   menuSelKeys.value = [to.path];
      //   expandRootMenu(to.path);
      // }
    });
    onMounted(() => {
      // routeTabs.value.add(route);
      menuSelKeys.value = [route.path];
      // store.dispatch("menu/setRouteTabs", routeTabs.value);
      const info = authCache.getUserInfo();
      if (info) {
        username.value = info.username;
      }
      expandRootMenu(route.path);
    });
    // const tabChange = (activeKey: string) => {
    //   menuSelKeys.value = [activeKey];
    // };
    const topMenuKeys = ref<string[]>([]);
    const username = ref("");
    const subMenuSelKeys = ref<string[]>([]);
    function onSubMenuOpenChange(keys) {
      subMenuSelKeys.value = keys;
    }
    const pageLoading = computed(() => store.state.pageLoading);
    return {
      t,
      menuData,
      menuSelKeys,
      onCollapse,
      onBreakpoint,
      // routeTabs,
      // tabChange,
      restrictPath,
      globalLoading: computed(() => store.state.globalLoading),
      globalLoadingText: computed(() => store.state.globalLoadingText),
      topMenuKeys,
      applicationData,
      username,
      avater: DEFAULT_IMG_BASE64_STR,
      subMenuSelKeys,
      onSubMenuOpenChange,
      pageLoading,
    };
  },
});
</script>
<style lang="less">
@headerHeight: 48px;
.home-logo {
  height: @headerHeight;
  line-height: @headerHeight;
  text-align: center;
  a {
    display: inline-block;
  }
  img {
    height: 30px;
  }
  span {
    font-size: 16px;
    color: #fff;
    font-weight: 500;
  }
}
.home-menu {
  height: calc(100% - @headerHeight);
}
.home-header {
  padding: 0 16px;
  background-color: #fff;
  height: @headerHeight;
  border-bottom: 1px solid #e2e2e2;
}
.home-header > .ant-row {
  height: 100%;
}
.home-header-info {
  line-height: @headerHeight;
  img {
    height: 32px;
    width: 32px;
    border-radius: 32px;
  }
  .name {
    color: #0f1c33;
  }
  .role {
    background-color: #f3f5f7;
    color: #7b879a;
    font-size: 12px;
  }
}
.sider-trigger {
  position: absolute;
  bottom: 8px;
  right: 8px;
}
.ant-layout-sider-collapsed {
  .sider-trigger {
    left: 0;
    right: 0;
    text-align: center;
  }
}
.ant-layout-sider-zero-width-trigger {
  top: @headerHeight;
}
</style>
